<!DOCTYPE html>
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title JADE
    script(src="a.js")
    link(rel="stylesheet", href="a.css")
  body
    ol
      li
        img(src="a.js", alt="")
      li
        input(type="button", value="按钮")
      li
        a(href="http://www.baidu.com/") 百度
        a(href="http://www.qq.com/") 腾讯
    div 100
      span aaa
    div(style="width: 200px; height: 200px;") 样式写法一
    div(style={ backgruond: 'red', color: 'green' }) 样式写法二：STYLE专属json，可以变量传值
    div(class="a b c") 引入样式一
    div(class=['d', 'e', 'f'])  引入样式二：CLASS专属array，可以变量传值
    div.g CLASS简写
    div#h ID简写
    div&attributes({ title: 'JSON写法', class: 'i'}) JSON写法
    |原样输出
    //- 变量 #{}
    div 我的名字：#{name}
    //- 运算
    div 我的名字：#{a + b}
    //- STYLE变量
    div(style=styleJson)
    //- CLASS变量
    div(class=classArr)
    //- 多CLASS
    div(class=classArr, class="four")
    //- 定义变量：加 - 说明是段代码
    -var a = 20
    -var b = 30
    div #{a + b}
    //- 简写
    div=a+b
    //- 循环
    -for(var i=0; i<classArr.length; i++)
      div=classArr[i]
    //- 输出带html标签的内容，除止注入式功击：用户留言板带入script，加 ! 不需要转义
    div!=content
    //- 判断
    -var shu=13
    -if (shu%2 === 0)
      div #{shu}偶数
    -else
      div #{shu}奇数
    //- swich写法改成case,只要前面是代码后面就不用一直用 - ，比如 -var换行后if前面就可以不用加 -
    -var sw = 5
    case sw
      when 1
        div 我是一
      when 2
        div 我是二
      when 3
        div 我是三
      when 4
        div 我是四
      default
        div 我什么也不是
      
  
    script alert('弹窗')
    script
      |if(true){
      | alert('原样输出（前加|）：写法一')
      |}
    script.
      if(true){
       alert('原样输出（加个.）：写法二')
      }
    script
      include a.js